<template>
  <div class="game-order" :class="game.order_list.length > 0 && game.order_list[0].member ? 'gane-orders' : ''">
    <table>
      <thead>
        <th width="80px">平台</th>
        <th width="150px">盘口</th>
        <th width="60px">实数</th>
        <th width="60px">虚数</th>
        <th width="80px">状态</th>
        <th width="80px">结算</th>
        <th width="80px">账号</th>
        <th width="100px" v-if="game.order_list.length > 0 && game.order_list[0].member">跟单方向</th>
        <th width="80px" v-if="game.order_list.length > 0 && game.order_list[0].member">跟单账号</th>
        <th width="150px">时间</th>
      </thead>
      <tbody>
        <tr v-if="game.order_list.length == 0 && game.order_add_list.length == 0">
          <td colspan="8">暂无数据</td>
        </tr>
        <tr v-for="item in game.order_list" :key="item.id">
          <td>{{ platformObj[item.bc_type]?.name }}</td>
          <!-- <td>{{ item.place_pk_info_ch }}@{{ item.place_odds_info }}</td> -->
          <td style="display: flex; flex-direction: column">
            <div style="height: 18px">{{ item.place_pk_info_ch }}@{{ item.place_odds_info }}</div>
            <div style="height: 18px" v-if="store.task.taskType == '_place_order' || store.task.taskType == '_copy_order_hand' || store.task.taskType == '_copy_order_auto'">
              {{ item.score == null || item.score.score == '' || item.score.score == null ? '-' : item.score.score }}
            </div>
          </td>
          <td>{{ item.total_amount }}</td>
          <td>{{ item.real_amount }}</td>
          <td>
            <app-text v-if="item.place_status == 0">准备下单</app-text>
            <app-text v-else-if="item.place_status == 1">正在下单</app-text>
            <app-text v-else-if="item.place_status == 2" type="success">下单成功</app-text>
            <app-text v-else-if="item.place_status == 3" type="fail">下单失败</app-text>
          </td>
          <td>{{ item.check_status == 1 ? '已结算' : '未结算' }}</td>
          <td>{{ item.user_name }}</td>
          <td v-if="game.order_list.length > 0 && game.order_list[0].member">
            {{ item.copy_direction == 'up' ? '正向' : '反向' }}
          </td>
          <td v-if="game.order_list.length > 0 && game.order_list[0].member">{{ item.member }}</td>

          <td>{{ item.created_at }}</td>
        </tr>
        <tr v-for="item in game.order_add_list" :key="item.id">
          <td>{{ platformObj[item.bc_type]?.name }}</td>
          <!-- <td>{{ item.place_pk_info_ch }}@{{ item.place_odds_info }}</td> -->
          <td style="display: flex; flex-direction: column">
            <div style="height: 18px">{{ item.place_pk_info_ch }}@{{ item.place_odds_info }}</div>
            <div style="height: 18px" v-if="store.task.taskType == '_place_order' || store.task.taskType == '_copy_order_hand' || store.task.taskType == '_copy_order_auto'">
              {{ item.score == null || item.score.score == '' || item.score.score == null ? '-' : item.score.score }}
            </div>
          </td>
          <td>{{ item.total_amount }}</td>
          <td>{{ item.real_amount }}</td>
          <td>
            <app-text v-if="item.place_status == 0">[补]准备下单</app-text>
            <app-text v-else-if="item.place_status == 1">[补]正在下单</app-text>
            <app-text v-else-if="item.place_status == 2" type="success" ellipsis>[补]下单成功</app-text>
            <app-text v-else-if="item.place_status == 3" type="fail">[补]下单失败</app-text>
          </td>
          <td>{{ item.check_status == 1 ? '已结算' : '未结算' }}</td>
          <td>{{ item.user_name }}</td>
          <td>{{ item.created_at }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
const { platformObj } = inject('/home')
const { store } = inject('/home')

const props = defineProps({
  game: Array,
})
</script>
<style lang="scss" scoped>
.game-order {
  border-radius: 8px;
  border: solid 1px var(--pcmain-color);
  padding: 16px 0 8px 0;
  margin-top: 8px;
  overflow-x: auto;
}

.gane-orders table {
  width: max-content !important;
}
.game-order table{
  width: 100%;
}

table {
  // width: 100%;
  // width: max-content;
  text-align: center;
  font-size: 12px;
}

th {
  font-weight: inherit;
  line-height: 28px;
  color: #778090;
}

td {
  line-height: 28px;
  color: #252a30;
}

.repair {
  line-height: 16px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  padding: 0 4px;
  border-radius: 4px;
  background-color: var(--pcmain-color);
  margin-left: 4px;
}

/* 使用 Element Plus 样式 */
.game-order::-webkit-scrollbar {
  width: 8px;
  height: 5px;
}
.game-order::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 4px;
}
.game-order::-webkit-scrollbar-track {
  background-color: #f5f7fa;
  margin: 0 10px;
}
</style>
